import { defineConfig } from 'unocss';
import presetUno from '@unocss/preset-uno';
import presetAttributify from '@unocss/preset-attributify';
import presetIcons from '@unocss/preset-icons';

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      warn: true,
    }),
  ],
  shortcuts: {
    // 球球助手主题按钮
    'btn-primary':
      'px-6 py-3 rounded-full bg-gradient-to-r from-yellow-500 to-orange-500 text-white font-semibold hover:from-yellow-600 hover:to-orange-600 transition-all duration-300 transform hover:scale-105 shadow-lg',
    'btn-secondary':
      'px-6 py-3 rounded-full bg-gradient-to-r from-orange-500 to-amber-600 text-white font-semibold hover:from-orange-600 hover:to-amber-700 transition-all duration-300 transform hover:scale-105 shadow-lg',
    'btn-outline':
      'px-6 py-3 rounded-full border-2 border-white/30 text-white font-semibold hover:bg-white/10 hover:border-white/50 transition-all duration-300',
    'btn-danger':
      'px-6 py-3 rounded-full bg-gradient-to-r from-red-600 to-pink-600 text-white font-semibold hover:from-red-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-105 shadow-lg',

    // 卡片样式
    card: 'bg-white/10 backdrop-blur-lg border border-white/20 rounded-xl p-6 hover:bg-white/15 transition-all duration-300',
    'card-hover':
      'bg-white/10 backdrop-blur-lg border border-white/20 rounded-xl p-6 hover:bg-white/15 transition-all duration-300 transform hover:scale-105',
    'glass-card': 'bg-white/5 backdrop-blur-xl border border-white/10 rounded-xl',

    // 输入框样式
    'input-primary':
      'w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-yellow-500 focus:ring-2 focus:ring-yellow-500/50 transition-all duration-300',
    'input-glass':
      'w-full px-4 py-3 bg-white/5 backdrop-blur-sm border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-yellow-500 focus:ring-2 focus:ring-yellow-500/50 transition-all duration-300',

    // 渐变背景
    'bg-primary-gradient': 'bg-gradient-to-br from-slate-900 via-gray-900 to-black',
    'bg-secondary-gradient': 'bg-gradient-to-r from-yellow-500 via-orange-500 to-amber-600',
    'bg-card-gradient': 'bg-gradient-to-br from-white/8 to-white/3',

    // 文本渐变
    'text-gradient': 'bg-gradient-to-r from-yellow-400 via-orange-400 to-amber-400 bg-clip-text text-transparent',
    'text-primary-gradient': 'bg-gradient-to-r from-yellow-500 to-orange-500 bg-clip-text text-transparent',
    'text-secondary-gradient': 'bg-gradient-to-r from-orange-500 to-amber-600 bg-clip-text text-transparent',
  },
  theme: {
    colors: {
      // 球球助手主色调 - 金橙配色
      primary: {
        50: '#fefce8',
        100: '#fef9c3',
        200: '#fef08a',
        300: '#fde047',
        400: '#facc15',
        500: '#eab308',
        600: '#ca8a04',
        700: '#a16207',
        800: '#854d0e',
        900: '#713f12',
      },
      secondary: {
        50: '#fff7ed',
        100: '#ffedd5',
        200: '#fed7aa',
        300: '#fdba74',
        400: '#fb923c',
        500: '#f97316',
        600: '#ea580c',
        700: '#c2410c',
        800: '#9a3412',
        900: '#7c2d12',
      },
      accent: {
        50: '#fffbeb',
        100: '#fef3c7',
        200: '#fde68a',
        300: '#fcd34d',
        400: '#fbbf24',
        500: '#f59e0b',
        600: '#d97706',
        700: '#b45309',
        800: '#92400e',
        900: '#78350f',
      },
      // 紫色调（保留用于特殊场景）
      purple: {
        50: '#faf5ff',
        100: '#f3e8ff',
        200: '#e9d5ff',
        300: '#d8b4fe',
        400: '#c084fc',
        500: '#a855f7',
        600: '#9333ea',
        700: '#7c3aed',
        800: '#6b21a8',
        900: '#581c87',
      },
    },
    animation: {
      'fade-in': 'fadeIn 0.8s ease-in-out',
      'slide-up': 'slideUp 0.6s ease-out',
      'slide-down': 'slideDown 0.6s ease-out',
      'slide-left': 'slideLeft 0.6s ease-out',
      'slide-right': 'slideRight 0.6s ease-out',
      'pulse-slow': 'pulse 3s infinite',
      'bounce-slow': 'bounce 2s infinite',
      'spin-slow': 'spin 3s linear infinite',
      float: 'float 3s ease-in-out infinite',
    },
    keyframes: {
      fadeIn: {
        '0%': { opacity: '0', transform: 'translateY(20px)' },
        '100%': { opacity: '1', transform: 'translateY(0)' },
      },
      slideUp: {
        '0%': { transform: 'translateY(30px)', opacity: '0' },
        '100%': { transform: 'translateY(0)', opacity: '1' },
      },
      slideDown: {
        '0%': { transform: 'translateY(-30px)', opacity: '0' },
        '100%': { transform: 'translateY(0)', opacity: '1' },
      },
      slideLeft: {
        '0%': { transform: 'translateX(30px)', opacity: '0' },
        '100%': { transform: 'translateX(0)', opacity: '1' },
      },
      slideRight: {
        '0%': { transform: 'translateX(-30px)', opacity: '0' },
        '100%': { transform: 'translateX(0)', opacity: '1' },
      },
      float: {
        '0%, 100%': { transform: 'translateY(0px)' },
        '50%': { transform: 'translateY(-20px)' },
      },
    },
  },
});
